<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有了 界面</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/youle.css">
</head>

<body>
    <header id="header">
        <div class="content-inner">
            <div class="content-inner-content">
                <!-- 左边 -->
                <div class="content-left">
                    <div class="nav-logo">
                        <img src="./img/youle/logo.png" alt="">
                    </div>
                    <ul>
                        <li><span>首页</span></li>
                        <li><span>社区精选</span></li>
                        <li><span>精选好文</span></li>
                        <li><span>职场问答</span></li>
                        <li><span>职业百科</span></li>
                    </ul>
                </div>
                <!-- 右边 -->
                <div class="content-right">
                    <button>登录</button>
                </div>
            </div>
        </div>
    </header>


    <!-- 主要内容 -->
    <main id="main">
        <div id="page-main-content" class="page-wrap">
            <div class="page-content page-content-with-side page-content">
                <!-- 左边部分 -->
                <div class="page-main-width-side">
                    <div class="content-list-wrap">
                        <div class="tab-bar">
                            <ul>
                                <li>精选</li>
                            </ul>
                        </div>
                        <div>
                            <div class="feed-wrap">
                                <ul class="content-card-list">
                                    <li class="content-card-wrap">
                                        <div class="content-card">
                                            <div class="card-header">
                                                <div class="user-info user-info-card ">
                                                    <img src="./img/youle/1.png" alt="">
                                                </div>

                                                <div class=" user-message">
                                                    <span>姜林</span>
                                                    <span>普工/操作工·7年</span>
                                                </div>
                                            </div>
                                            <main class="card-content">
                                                <div class="question-title">
                                                    <h1>曹德旺称「年轻人不加班是时代的进步」，对于加班，你是什么态度？</h1>
                                                </div>
                                                <div class="text-viewer-wrap">
                                                    <p>偶尔加个班，真是有活赶个进度那无可厚非。天天加班那就是老板缺德带冒烟。</p>
                                                </div>
                                                <div class="topic-line">
                                                    <span class="jing">#</span>
                                                    <span>热点话题</span>
                                                </div>
                                            </main>
                                            <div class="card-footer">
                                                <div class="card-bottom-list">
                                                    <button>
                                                        <img src="./img/youle/赞.svg" alt="">
                                                        <span>赞</span>
                                                    </button>
                                                    <button>
                                                        <img src="./img/youle/评论.svg" alt="">
                                                        <span>评论</span>
                                                    </button>
                                                    <button>
                                                        <img src="./img/youle/分享.svg" alt="">
                                                        <span>分享</span>
                                                    </button>
                                                    <button>
                                                        <img src="./img/youle/比心.svg" alt="">
                                                        <span>GET</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- 右边部分 -->
                <div class="page-side">
                    <!-- 上边部分 -->
                    <div class="page-block hot-list-warp">
                        <div class="page-block-header">
                            <img src="./img/youle/火苗.svg" alt="">
                            <span class="hot-title">今日问题热榜</span>
                            <div class="header-pager">
                                <div class="arrow-left">&lt;</div>
                                <p class="pager-text">
                                    <span class="current">1</span>
                                    <i class="seg">/</i>
                                    <span>5</span>
                                </p>
                                <div class="arrow-right">&gt;</div>
                            </div>
                        </div>

                        <ul class="hot-list">
                            <li class="hot-item">
                                <div class="hot-item-index hot-1">1</div>
                                <span>长期居家办公和领导的日常沟通变少了，是否会影响晋升呢？</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 下边部分 -->
                    <div class="sticky-group">
                        <div class="page-block user-recommend">
                            <div class="page-block-header">
                                <h2 class="hot-title">推荐关注</h2>
                            </div>
                            <ul class="user-list">
                                <li class="user-item">
                                    <div class="avatar">
                                        <img src="http://img.duoziwang.com/2021/06/q101801413228587.jpg" alt="">
                                    </div>
                                    <div class="rec-info">
                                        <div class="nickname-wrap">
                                            <p>jin</p>
                                            <p>渠道主管·12年</p>
                                        </div>
                                        <div class="reason-wrap hasIcon">
                                            <img src="./img/youle/5.png" alt="">
                                            <span>最近TA回答了你的1个问题</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="user-item">
                                    <div class="avatar">
                                        <img src="http://img.duoziwang.com/2021/06/q101801413228587.jpg" alt="">
                                    </div>
                                    <div class="rec-info">
                                        <div class="nickname-wrap">
                                            <p>jin</p>
                                            <p>渠道主管·12年</p>
                                        </div>
                                        <div class="reason-wrap hasIcon">
                                            <img src="./img/youle/5.png" alt="">
                                            <span>最近TA回答了你的1个问题</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="user-item">
                                    <div class="avatar">
                                        <img src="http://img.duoziwang.com/2021/06/q101801413228587.jpg" alt="">
                                    </div>
                                    <div class="rec-info">
                                        <div class="nickname-wrap">
                                            <p>BOSS直聘·官方</p>
                                            <p>渠道主管·12年</p>
                                        </div>
                                        <div class="reason-wrap hasIcon">
                                            <img src="./img/youle/5.png" alt="">
                                            <span>最近TA回答了你的1个问题</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="user-item">
                                    <div class="avatar">
                                        <img src="http://img.duoziwang.com/2021/06/q101801413228587.jpg" alt="">
                                    </div>
                                    <div class="rec-info">
                                        <div class="nickname-wrap">
                                            <p>直直问答</p>
                                            <p>渠道主管·12年</p>
                                        </div>
                                        <div class="reason-wrap hasIcon">
                                            <img src="./img/youle/5.png" alt="">
                                            <span>最近TA回答了你的1个问题</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
<script src="./jquery-3.6.0.js"></script>
<script>
    $(window).ready(function () {
        $.ajax({
            type: 'get',
            url: '/getYouLe',
            dataType: 'json'
        }).done((data) => {
            let str = ''
            console.log(data.data.list);
            data.data.list.forEach((item, index) => {
                str += `
                <li class="content-card-wrap" data-index=${index}>
                                        <div class="content-card">
                                            <div class="card-header">
                                                <div class="user-info user-info-card ">
                                                    <img src="${item.img}" alt="">
                                                </div>

                                                <div class=" user-message">
                                                    <span>${item.name}</span>
                                                    <span>${item.job}</span>
                                                </div>
                                            </div>
                                            <main class="card-content">
                                                <div class="question-title">
                                                    <h1>${item.h1}</h1>
                                                </div>
                                                <div class="text-viewer-wrap">
                                                    <p>${item.p}</p>
                                                </div>
                                                <div class="topic-line">
                                                    <span class="jing">#</span>
                                                    <span>${item.hotContent}</span>
                                                </div>
                                            </main>
                                            <div class="card-footer">
                                                <div class="card-bottom-list">
                                                    <button>
                                                        <img src="./img/youle/赞.svg" alt="">
                                                        <span>赞</span>
                                                    </button>
                                                    <button>
                                                        <img src="./img/youle/评论.svg" alt="">
                                                        <span>评论</span>
                                                    </button>
                                                    <button>
                                                        <img src="./img/youle/分享.svg" alt="">
                                                        <span>分享</span>
                                                    </button>
                                                    <button>
                                                        <img src="./img/youle/比心.svg" alt="">
                                                        <span>GET</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                
                `
            });
            $('.content-card-list').html(str)
        })
    })
    $(window).ready(function () {
        $.ajax({
            type: 'get',
            url: '/getYouLe',
            dataType: 'json'
        }).done((data) => {
            let str = ''
            data.data.rightList.forEach((item, index) => {
                str += `
                <li class="hot-item">
                                <div class="hot-item-index hot-1">${item.number}</div>
                                <span>${item.text}</span>
                            </li>
                `
            });
            $('.hot-list').html(str)
        })
    })


// -------当页面滚动到一定距离时只有左边滚动 右边固定-----------------------

// $('.sticky-group').offset().Top
// console.log($('.sticky-group').offset().Top);
window.addEventListener('scroll',function () {
    // console.log(document.documentElement.scrollTop);
    // console.log($('.sticky-group').offset().top);
    // console.log(222);
    if(document.documentElement.scrollTop >= 994 ){
        console.log(111);
        $('.sticky-group').css({
            "position": "fixed"
        })
    }else{
        $('.sticky-group').css({
            "position": "relative"
        })
    }

})

</script>

</html>